<template>
    <el-card v-loading="loading" class="allOrder_container">
        <template #header>
            <div class="allOrder_container-card">挂号订单</div>
        </template>
        <!--提供用户选择的下拉菜单-->
        <el-form class="allOrder_container-form" :inline="true" label-width="68">
            <el-form-item label="就诊人:">
                <el-select @change="userAndOrder" v-model="patientId" placeholder="请选择就诊人">
                    <el-option v-for="item in allUser" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单状态:">
                <el-select @change="userAndOrder" v-model="orderStatus" placeholder="请选择订单状态">
                    <el-option v-for="(item, index) in allOrderState" :key="index" :label="item.comment"
                        :value="item.status"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="reset" type="primary">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格展示订单的数据 -->
        <el-table class="allOrder_container-table" :data="allOrderArr" :border="true">
            <el-table-column prop="patientName" label="就诊人" width="120"></el-table-column>
            <el-table-column prop="reserveDate" label="就诊时间" width="120"></el-table-column>
            <el-table-column prop="hosname" label="医院" width="120"></el-table-column>
            <el-table-column prop="depname" label="科室" width="150"></el-table-column>
            <el-table-column prop="title" label="医生" width="120"></el-table-column>
            <el-table-column label="医事服务费" width="100" align="center">
                <template #="{ row }">
                    <el-tag type="danger">{{ row.amount }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="param.orderStatusString" label="订单状态" width="150"></el-table-column>
            <el-table-column label="操作" fixed="right" width="80" align="center">
                <template #="{ row }">
                    <el-button link type="primary" @click="goDetail(row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="pagination" v-model:current-page="pageNo" v-model:page-size="pageSize" :pager-count="5"
            :page-sizes="[10, 20, 30, 40]" layout="prev, pager, next, jumper, ->, sizes, total" :total="total"
            @size-change="handleSizeChange" @current-change="getOrderInfo" />
    </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { reqUserOrderInfo, reqAllUser, reqOrderState } from '@/api/user/index'
import type { UserOrderInfoResponseData, Records, AllUserResponseData, AllOrderStateResponseData, AllUser, AllOrderState } from "@/api/user/type";
// @ts-ignore
import { ElMessage } from "element-plus";
// 当前分页器页码
let pageNo = ref<number>(1);
// 当前页码展示几条数据
let pageSize = ref<number>(10);
// 存储订单的总个数
let total = ref<number>(0);
// 收集就诊人的ID
let patientId = ref<string>("");
// 订单的状态
let orderStatus = ref<string>("");
// 存储全部的订单
let allOrderArr = ref<Records>([]);
// 存储全部就诊人的信息
let allUser = ref<AllUser>([]);
// 存储全部订单的状态
let allOrderState = ref<AllOrderState>([]);
// 判断数据是否全部请求完毕
let loading = ref<boolean>(false);
let $router = useRouter();
onMounted(() => {
    // 获取订单的方法
    getOrderInfo();
    // 获取全部就诊人的信息以及获取全部的订单的状态
    getData();
})
// 获取订单的方法
const getOrderInfo = async (pager: number = 1) => {
    pageNo.value = pager
    loading.value = await true;
    let { code, data }: UserOrderInfoResponseData = await reqUserOrderInfo(pageNo.value, pageSize.value, patientId.value, orderStatus.value)
    if (code === 200) {
        allOrderArr.value = data.records;
        total.value = data.total
    }
    loading.value = await false;
};
// 详情按钮的回调
const goDetail = (row: any) => {
    $router.push({ path: '/user/order', query: { orderId: row.id } })
}
// 下拉菜单事件的回调
const handleSizeChange = () => {
    getOrderInfo()
}
//获取就诊人与订单状态接口方法
const getData = async () => {
    let { code, data }: AllUserResponseData = await reqAllUser();
    let result: AllOrderStateResponseData = await reqOrderState();
    if (code === 200 && result.code === 200) {
        allUser.value = data;
        allOrderState.value = result.data;
    }
}
// 重置按钮
const reset = () => {
    patientId.value = ''
    orderStatus.value = ''
    getOrderInfo()
    ElMessage({
        message: '重置成功',
        type: 'success'
    })
}
// 查询就诊人与订单状态的change事件
const userAndOrder = () => {
    getOrderInfo()
}
</script>
<style scoped lang="scss">
.allOrder_container {
    width: 100%;

    .allOrder_container-card {
        font-size: 24px;
    }

    .allOrder_container-form {
        .el-select {
            :deep(.el-input) {
                width: 100%;
            }
        }
    }

    .allOrder_container-table {
        margin-bottom: 16px;
    }
}

@media (max-width:1199px) {
    :deep(.el-pagination) {
        .el-pagination__jump {
            display: none;
        }

        .el-pagination__sizes {
            display: none;
        }
    }
}

@media (max-width:768px) {
    :deep(.el-pagination) {
        display: flex;
        justify-content: center;

        .el-pager {
            li {
                min-width: 18px !important;
                font-size: 12px !important;
            }
        }

        .el-pagination__jump {
            display: none;
        }

        .el-pagination__rightwrapper {
            display: none;
        }
    }

    .allOrder_container {
        .allOrder_container-card {
            font-size: 18px;
        }
    }

    .allOrder_container-form {
        .el-form-item {
            margin: 6px 2px;
        }
    }

    .allOrder_container-table {
        margin-bottom: 10px;
    }
}
</style>